<template>
  <div style="height:90vh;background-color:#fff;">
    <p style="margin:0;padding: 0 0 0 5px;height:4vh">更新时间:2024-01-01 17:34:23</p>
    <div style="height:43vh">
      <span id="main" style="width:80vh;height:95%;display: inline-block"></span>
      <span id="late" style="width:80vh;height:95%;display: inline-block"></span>
    </div>
    <div style="height:42.5vh">
      <span id="staff" style="width:80vh;height:100%;display: inline-block"></span>
      <span id="audit" style="width:80vh;height:100%;display: inline-block"></span>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import { markRaw } from "vue";

function subtractDateByDays(days) {
  const currentDate = new Date();
  currentDate.setDate(currentDate.getDate() - days);
  return currentDate.toLocaleDateString();
}

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = markRaw(echarts.init(document.getElementById('main')));
// 绘制图表
  myChart.setOption({
    title: {
      text: '统计1',
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {
      name: '销量（万件）',
      nameLocation: 'end',
      nameTextStyle: {
        align: 'center',
      }
    },
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  });

  const myChart1 = markRaw(echarts.init(document.getElementById('staff')));
  //在职员工统计
  myChart1.setOption({
    title: {
      text: '在职员工状态',
    },
    tooltip: {},
    series: [
      {
        name: '数量',
        type: 'pie',
        data: [
          {name: '正常', value: 200},
          {name: '外出', value: 30},
          {name: '请假', value: 20},
        ].sort(function (a, b) {
          return a.value - b.value;
        }),
        animationType: 'scale',
        label: {
          show: true,
          formatter: '{b}: {c} ({d}%)'
        },
      }
    ]
  });

  const myChart2 = markRaw(echarts.init(document.getElementById('late')));
  //在职员工统计
  myChart2.setOption({
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    legend: {
      data: ['迟到人数', '早退人数', '旷工人数']
    },
    title: {
      text: '近一周异常考勤情况',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        subtractDateByDays(6),
        subtractDateByDays(5),
        subtractDateByDays(4),
        subtractDateByDays(3),
        subtractDateByDays(2),
        subtractDateByDays(1),
        new Date().toLocaleDateString(),
      ]
    },
    yAxis: {
      type: 'value',
      name: '人数',
      nameLocation: 'end',
      nameTextStyle: {
        align: 'center',
      }
    },
    series: [
      {
        name: '迟到人数',
        type: 'line',
        stack: 'Total',
        data: [4, 2, 4, 5, 6, 7, 6],
        label: {
          show: true,
          position: 'top'
        },
        smooth: true,
        itemStyle: {
          color: '#5470c6',
        }
      },
      {
        name: '早退人数',
        type: 'line',
        stack: 'Total',
        data: [1, 5, 6, 2, 1, 3, 1],
        label: {
          show: true,
          position: 'top'
        },
        smooth: true,
        itemStyle: {
          color: '#fac858',
        }
      },
      {
        name: '旷工人数',
        type: 'line',
        stack: 'Total',
        data: [1, 2, 1, 1, 1, 3, 2],
        label: {
          show: true,
          position: 'top'
        },
        smooth: true,
        itemStyle: {
          color: '#88c06e',
        }
      }
    ]
  });

  const myChart3 = markRaw(echarts.init(document.getElementById('audit')));
  //在职员工统计
  myChart3.setOption({
    title: {
      text: '审批情况',
    },
    legend: {},
    tooltip: {},
    dataset: {
      source: [
        ['product', '我已审批', '待我审批'],
        ['请假审批', 2, 1],
        ['资产审批', 3, 0],
        ['外出审批', 7, 0],
        ['加班审批', 5, 2]
      ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
      {
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        }
      },
      {
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  });
})
</script>

<style scoped>

</style>